{namespace gdata.viewer.templates}

/**
 * @param id
 */
{template .pickerBase}
<!doctype html>
<html>
<head>
<style>
  body {lb}font-family: Arial; font-size: 13px{rb}
  .doclistentry {lb}color: blue; text-decoration: underline; cursor: pointer{rb}
</style>
<link rel="stylesheet"
      href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menu.css"
      type="text/css">
<link rel="stylesheet"
      href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuitem.css"
      type="text/css">
<link rel="stylesheet"
      href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuseparator.css"
      type="text/css">
<style>
.entryDetails {lb}
  float: right;
  font-size: 11px;
  width: 13px;
  height: 13px;
  cursor: pointer;
  border: 1px solid blue;
  margin: 1px 2px 0 0;
  text-align: center;
  color: blue;
{rb}

.entryDetails:hover {lb}
  background-color: #C9D7F1;
{rb}

.goog-menu {lb}
  padding: 2px 0;
{rb}

.goog-menuitem {lb}
  padding: 4px;
  width: 100px;
{rb}

.goog-menuitem-highlight {lb}
  padding: 3px 4px;
  width: 100px;
{rb}

</style>
</head>
<body onload="parent.pickerOnFrameLoad('{$id}',this)">
<div id="content" style="margin-left: 7px">
  <form id="login">
    Username: <input id="username" value=""><br>
    Password: <input id="password" type="PASSWORD"><br>
    <input type="SUBMIT" value="Sign in">
  </form>
</div>
</body>
</html>
{/template}

/**
 * @param showEmail
 * @param email
 */
{template .picker}
<div id="status">
  {if $showEmail}
  Logged in as <b>{$email}</b>
  {/if}
</div>
<div id="doclist"></div>
{/template}

/**
 * @param hasViewer
 * @param entries
 */
{template .list}
{foreach $entry in $entries}
// min-height is needed so there is enough clearance for the .entryDetails elements
<div style="min-height: 16px">
{call .listEntry}
  {param hasViewer: $hasViewer /}
  {param entry: $entry /}
{/call}
</div>

{ifempty}
  // The user has never created a document through the editor.
  <b style="color:#A00">Create your first document!</b>
{/foreach}
{/template}

/**
 * @param hasViewer
 * @param entry
 */
{template .listEntry}
  // Box the user can click to bring up the details.
  <div class="entryDetails" data-entry-id="{$entry.id}">&#x25BC;</div>

  {if $hasViewer}
    <span data-entry-id="{$entry.id}"
          class="doclistentry">
      {$entry.title}
    </span>
  {else}
    <a href="{$entry.url}" target="_blank">{$entry.title}</a>
  {/if}
{/template}


/**
 * @param innerHtml
 */
{template .documentHtml}
<html>
<head>
  <link rel="stylesheet" href="/editorframe.css" type="text/css">
</head>
<body>
{$innerHtml|noAutoescape}
</body>
</html>
{/template}

/**
 * @param id
 */
{template .iframeElement}
// Note that height:100% will not have the desired effect in standards mode
// pages but will in quirksmode pages.
<iframe src="javascript:parent.viewerDisplayHtml({$id})"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        onload="parent.viewerIsLoaded({$id}, this)"
        style="height: 100%; width: 100%">
</iframe>
{/template}

/***/
{template .newDocumentHtml}
<html>
<head>

</head>
<body>

<div class="editable paragraph">Place your cursor here and start editing!</div>

</body>
</html>
{/template}
